<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
Zapatec Utils Overview
</title>
<link rel ="stylesheet" type="text/css" href="../../../zapatec/utils/jsdocs/stylesheet.css" title="Style">
<script>
function asd() {
	
		parent.document.title="demo.js Overview";
	
}
</script>
</head>
<body bgcolor="white" onLoad="asd();">

<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> 	<font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top">
<em>
<b>Zapatec Utils</b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="../../../zapatec/utils/jsdocs/index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="../../../zapatec/utils/jsdocs/overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="../../../zapatec/utils/jsdocs/allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<center>
	
	   <h2>demo.js</h2>
	
</center>

	


<h4>Summary</h4>
<p>
	
		No overview generated for 'demo.js'<BR/><BR/>
	
</p>

<hr>


    <table border="1" cellpadding="3" cellspacing="0" width="100%">
    <tr bgcolor="#CCCCFF" class="TableHeadingColor">
    <td colspan=2><font size="+2">
    
        <b>Class Summary</b>
    
    </font></td>
    </tr>
    
    <tr bgcolor="white" class="TableRowColor">
    <td width="15%"><b><a href="../../../zapatec/utils/jsdocs/Zapatec/demo.html">Zapatec.demo</a></b></td>
    <td>&nbsp;</td>
    </tr>
    
    </table>
    <hr/> 


<!-- ========== METHOD SUMMARY =========== -->

<!-- ========== END METHOD SUMMARY =========== -->


        <pre class="sourceview">Zapatec.demo=<span class="reserved">function</span>() {
	<span class="reserved">this</span>.init();
};

Zapatec.demo.<span class="reserved">prototype</span>.init=<span class="reserved">function</span>() {
	<span class="reserved">this</span>.demoTab = null;
	<span class="reserved">this</span>.htmlTab = null;
	<span class="reserved">this</span>.cssTab = null;
};

<span class="comment">//--------------------------------------------------------------------------</span>
<span class="comment">/*
Function called on startup
*/</span>
Zapatec.demo.<span class="reserved">prototype</span>.run=<span class="reserved">function</span>() {
    <span class="reserved">this</span>.need2Change2demo = <span class="literal">''</span>;
    <span class="reserved">this</span>.demo_load();
    <span class="reserved">this</span>.zptree = new Zapatec.Tree({
        <span class="literal">'tree'</span>: <span class="literal">"tree"</span>,
        <span class="literal">'expandOnLabelClick'</span>: true,
        <span class="literal">'expandOnLabel'</span>: true,
        <span class="literal">'theme'</span>: <span class="literal">'demos'</span>,
        <span class="literal">'highlightSelectedNode'</span>: true,
        <span class="literal">'createWholeDOM'</span>: true,
        <span class="literal">'eventListeners'</span>: {
            <span class="literal">'select'</span>: <span class="reserved">function</span>() {
                <span class="reserved">if</span> (<span class="reserved">this</span>.data.attributes != undefined &amp;&amp; <span class="reserved">this</span>.data.attributes.demo != undefined) {
						<span class="reserved">if</span> (zpDemo.strPath2Demo != undefined)
							<span class="comment">// if path2Demo defined then ALWAYS use</span>
							zpDemo.strPath = zpDemo.strPath2Demo
						<span class="reserved">else</span>
						{

                    try {
                        <span class="reserved">if</span> (<span class="reserved">this</span>.config.parentNode.config.parentNode.data.attributes.widget != undefined) {
                            zpDemo.strPath = <span class="literal">'../../'</span> + <span class="reserved">this</span>.config.parentNode.config.parentNode.data.attributes.widget + <span class="literal">'/demo/'</span>;
                        } <span class="reserved">else</span> {
                            zpDemo.strPath = <span class="literal">'../demo/'</span>;
                        }
                    } catch (e) {
                        zpDemo.strPath = <span class="literal">'../demo/'</span>;
                    }
						}
                    zpDemo.changeDemo(<span class="reserved">this</span>.data.attributes.demo, 
                                      <span class="reserved">this</span>.data.attributes.themes, 
                                      <span class="reserved">this</span>.data.attributes.demo,
                                      <span class="reserved">this</span>.data.label);
                }
            },
            <span class="literal">"loadDataEnd"</span>: <span class="reserved">function</span>(){
           		<span class="reserved">if</span>(<span class="reserved">this</span>.data &amp;&amp; <span class="reserved">this</span>.data.label &amp;&amp; <span class="reserved">this</span>.data.label.indexOf(<span class="literal">"Demos"</span>) &gt;= 0 &amp;&amp; <span class="reserved">this</span>.oldSource &amp;&amp; zpDemo.need2Change2demo){
	            	setTimeout(<span class="reserved">function</span>(){
		        		zpDemo.changeDemoById(zpDemo.need2Change2demo);
						zpDemo.need2Change2demo = null;
					}, 0);
				}
            }
        }
    }
    );

    <span class="reserved">this</span>.tab_build();
}

Zapatec.demo.<span class="reserved">prototype</span>.changeDemoById = <span class="reserved">function</span>(id){
	<span class="reserved">if</span>(!<span class="reserved">this</span>.zptree){
		<span class="reserved">return</span>;
	}

	var treeNode = <span class="reserved">this</span>.zptree.find(<span class="reserved">function</span>(node){
		<span class="reserved">return</span> node.data.attributes &amp;&amp; node.data.attributes.demo == id;
	});

	<span class="reserved">if</span>(treeNode){
		treeNode.sync();
	}
}

<span class="comment">/*
Function called when a demo is clicked on in the tree
*/</span>
Zapatec.demo.<span class="reserved">prototype</span>.changeDemo=<span class="reserved">function</span>(url, css, demo, title) {
   <span class="comment">// are tabs build yet?</span>
	<span class="reserved">if</span> (!<span class="reserved">this</span>.demoTab)
		<span class="reserved">return</span>;

	<span class="reserved">this</span>.objTabs.changeTab(<span class="literal">"demo"</span>);
	var _this=<span class="reserved">this</span>
    hash_prefix = <span class="literal">''</span>;
	<span class="reserved">if</span> (<span class="reserved">this</span>.strPath != undefined)
		url=<span class="reserved">this</span>.strPath + url
        <span class="reserved">if</span> (<span class="reserved">this</span>.strPath.indexOf(<span class="literal">'zp'</span>) != -1 &amp;&amp; <span class="reserved">this</span>.withwidgets) {
            hash_prefix = <span class="reserved">this</span>.strPath.substring(
                            <span class="reserved">this</span>.strPath.indexOf(<span class="literal">'zp'</span>),
                            <span class="reserved">this</span>.strPath.indexOf(<span class="literal">'/'</span>, <span class="reserved">this</span>.strPath.indexOf(<span class="literal">'zp'</span>))
                            );
        }
	<span class="reserved">if</span> (<span class="reserved">this</span>.idAlternate)
		document.getElementById(<span class="reserved">this</span>.idAlternate).style.display = <span class="literal">"none"</span>;
	document.getElementById(<span class="literal">"tabs_content"</span>).style.display = <span class="literal">"block"</span>;
	<span class="reserved">this</span>.demoTab.container.getContainer().style.height = <span class="literal">"700px"</span>;
	<span class="reserved">if</span>(Zapatec.is_opera){
		<span class="reserved">this</span>.demoTab.config.showLoadingIndicator = false; <span class="comment">// very strange glitch :-/</span>
	}
	<span class="reserved">this</span>.demoTab.setPaneContent(url, <span class="literal">"html/url"</span>);
	<span class="reserved">this</span>.demoTab.container.fireWhenReady(<span class="reserved">function</span>(pane) {
		var height = 0;
		var doc = <span class="reserved">this</span>.iframeDocument;
		<span class="reserved">if</span> (!doc) {<span class="reserved">return</span> null;}
		<span class="reserved">if</span> (doc.compatMode &amp;&amp; doc.compatMode == <span class="literal">'CSS1Compat'</span>) {
			height = doc.documentElement.scrollHeight || doc.documentElement.offsetHeight;
		} <span class="reserved">else</span> {
			height = doc.body.scrollHeight || doc.documentElement.scrollHeight;
		}
	            
		<span class="reserved">if</span>(height &lt; 700){
			height = 700;
		}

		<span class="reserved">this</span>.getContainer().style.height = (height + 30) + <span class="literal">"px"</span>;
	});

	var this_htmlTab=<span class="reserved">this</span>.htmlTab
	Zapatec.Transport.fetch({
		url : url + (Zapatec.is_opera ? <span class="literal">"?"</span> : <span class="literal">""</span>),
		onLoad : <span class="reserved">function</span>(response) {
			this_htmlTab.value = response.responseText;
		},
		onError : <span class="reserved">function</span>(error) {
			alert(error.errorDescription);
		}
	});
	<span class="reserved">this</span>.cssTab.value = <span class="literal">""</span>;
	var this_cssTab=<span class="reserved">this</span>.cssTab
	<span class="reserved">function</span> fetchCSS(theme) {
		Zapatec.Transport.fetch({
			url : (!_this.strPath ? <span class="literal">'../themes/'</span> : _this.strPath + <span class="literal">'../themes/'</span>) + theme + <span class="literal">'.css'</span>,
			onLoad : <span class="reserved">function</span>(response) {
				this_cssTab.value += <span class="literal">"/* "</span> + theme + <span class="literal">" */\n\n"</span> + response.responseText + <span class="literal">"\n"</span>;
			},
			onError : <span class="reserved">function</span>(error) {
				alert(error.errorDescription);
			}
		});
	}
	<span class="reserved">for</span> (var i = 0; i &lt; css.length; ++i) {
		<span class="reserved">if</span> (css[i] == <span class="literal">'none'</span>) {
			this_cssTab.value = <span class="literal">"There is no theme for this demo"</span>;
		} <span class="reserved">else</span> {
			fetchCSS(css[i]);
		}
	}
	document.title = <span class="literal">"AJAX "</span> + <span class="reserved">this</span>.strWidget + <span class="literal">" - "</span> + title;
    <span class="reserved">if</span> (hash_prefix != <span class="literal">''</span>) {
        hash = hash_prefix + <span class="literal">'/'</span> + demo;
    } <span class="reserved">else</span> {
        hash = demo;
    }
    location.href = location.href.substring(0, location.href.length - location.hash.length) + <span class="literal">'#'</span> + hash;
}
		
<span class="comment">/*
Function called when a demo is clicked on in the tree
*/</span>
Zapatec.demo.<span class="reserved">prototype</span>.changeDemoByName=<span class="reserved">function</span>(demo) {
    <span class="reserved">this</span>.need2Change2demo = demo;
}

<span class="comment">//--------------------------------------------------------------------------</span>
<span class="comment">//--------------------------------------------------------------------------</span>

<span class="comment">// Load first demo, done after tree and tabs loaded</span>
Zapatec.demo.<span class="reserved">prototype</span>.demo_load=<span class="reserved">function</span>() {
    var hash = <span class="literal">""</span>;
    <span class="reserved">if</span> (hash = window.location.hash.slice(1)) {
        <span class="reserved">this</span>.changeDemoByName(hash);
    } <span class="reserved">else</span> {
        <span class="reserved">if</span> (<span class="reserved">this</span>.zpdefDemo) {
            location.href += <span class="literal">"#"</span> + <span class="reserved">this</span>.zpdefDemo;
            <span class="reserved">this</span>.changeDemoByName(<span class="reserved">this</span>.zpdefDemo);
        } <span class="reserved">else</span> { <span class="comment">// no anchor, disable tab pane, enable alternate</span>
            document.getElementById(<span class="literal">"tabs_content"</span>).style.display = <span class="literal">"none"</span>;
            <span class="reserved">if</span> (<span class="reserved">this</span>.idAlternate)
                document.getElementById(<span class="reserved">this</span>.idAlternate).style.display = <span class="literal">"block"</span>;
        }
    }
}

Zapatec.demo.<span class="reserved">prototype</span>.tree_load=<span class="reserved">function</span>() {
			<span class="reserved">this</span>.zptree = new Zapatec.Tree(<span class="literal">"zpDemoList"</span>, {<span class="literal">'expandOnLabel'</span>: true, theme: <span class="literal">'demos'</span>});
}

<span class="comment">//--------------------------------------------------------------------------</span>


Zapatec.demo.<span class="reserved">prototype</span>.tab_build=<span class="reserved">function</span>() 
{
    var tabs = {
        tabs : [
            {
                id : <span class="literal">"demo"</span>,
                linkInnerHTML : <span class="literal">"&lt;span style='text-decoration : underline; border : none; padding : 0px;'&gt;D&lt;/span&gt;emo"</span>,
                accessKey : <span class="literal">"d"</span>,
                title : <span class="literal">"demo"</span>,
                tabType : <span class="literal">"iframe"</span>
            },
            {
                id : <span class="literal">"html"</span>,
                linkInnerHTML : <span class="literal">"HTM&lt;span style='text-decoration : underline; border : none; padding : 0px;'&gt;L&lt;/span&gt;"</span>,
                accessKey : <span class="literal">"l"</span>,
                title : <span class="literal">"HTML part of the demo."</span>,
                content : document.getElementById(<span class="literal">"html_source"</span>),
                tabType : <span class="literal">"div"</span>
            },
            {
                id : <span class="literal">"css"</span>,
                linkInnerHTML : <span class="literal">"CS&lt;span style='text-decoration : underline; border : none; padding : 0px;'&gt;S&lt;/span&gt;"</span>,
                accessKey : <span class="literal">"s"</span>,
                title : <span class="literal">"CSS part of the demo."</span>,
                content : document.getElementById(<span class="literal">"css_source"</span>),
                tabType : <span class="literal">"div"</span>
            }
        ]
    };

    var self = <span class="reserved">this</span>;

    <span class="comment">// Create a new demo|css|html tabs widget instance</span>
    <span class="reserved">this</span>.objTabs = new Zapatec.Tabs({
        tabBar : <span class="literal">"tabBar"</span>,
        tabs : <span class="literal">"tabs"</span>,
        source: tabs,
        sourceType : <span class="literal">"json"</span>,
        themePath : Zapatec.zapatecPath + <span class="literal">'/dhelp/themes/'</span>,
        changeUrl : false,
        theme: <span class="literal">'default'</span>,
        ignoreUrl: true,
        onTabChange: <span class="reserved">function</span>(oCfg, numberOfTries){
        	<span class="reserved">if</span>(oCfg.newTabId == <span class="literal">'demo'</span>){
        		<span class="reserved">if</span>(!self.demoTab){
        			var selfFunction = arguments.callee;
        			numberOfTries = ++numberOfTries || 1;

        			<span class="reserved">if</span>(numberOfTries &lt; 10){
	        			setTimeout(<span class="reserved">function</span>(){selfFunction(oCfg, numberOfTries)}, 100);
	        		} <span class="reserved">else</span> {
						self.demoTab.container.style.height = 700 + <span class="literal">"px"</span>;
	        		}

	        		<span class="reserved">return</span>;
        		}

				self.demoTab.container.fireWhenReady(<span class="reserved">function</span>(pane) {
					var height = 0;
					var doc = <span class="reserved">this</span>.iframeDocument;
					<span class="reserved">if</span> (!doc) {<span class="reserved">return</span> null;}
					<span class="reserved">if</span> (doc.compatMode &amp;&amp; doc.compatMode == <span class="literal">'CSS1Compat'</span>) {
						height = doc.documentElement.scrollHeight || doc.documentElement.offsetHeight;
					} <span class="reserved">else</span> {
						height = doc.body.scrollHeight || doc.documentElement.scrollHeight;
					}
	            
					<span class="reserved">if</span>(height &lt; 700){
						height = 700;
					}

					<span class="reserved">this</span>.getContainer().style.height = (height + 30) + <span class="literal">"px"</span>;
				});
        	}
        }
    });
    
    <span class="reserved">this</span>.demoTab = <span class="reserved">this</span>.objTabs.tabs[<span class="literal">"demo"</span>];
    <span class="reserved">this</span>.htmlTab = document.getElementById(<span class="literal">"html_source"</span>);
    <span class="reserved">this</span>.cssTab = document.getElementById(<span class="literal">"css_source"</span>);

    var hash = <span class="literal">""</span>;
    <span class="reserved">this</span>.demoTab.container.getContainer().style.width = <span class="literal">"100%"</span>;
    <span class="reserved">this</span>.demoTab.container.getContainer().style.height = <span class="literal">"700px"</span>;
}
</pre>
	<hr>



<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="../../../zapatec/utils/jsdocs/help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top"><em>
<b>Zapatec Utils</b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="../../../zapatec/utils/jsdocs/index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="../../../zapatec/utils/jsdocs/overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="../../../zapatec/utils/jsdocs/allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<font size="-1">

</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Thu Aug 16 12:18:39 2007</div>
</body>
</html>
